<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#di1{
				width: 800px;
				height: 800px;
				background-color: #90EE90;
				margin: auto;
				padding: 35px 50px 35px 50px ;
				font:larger ;
				color: #A9A9A9;
				
			}
			#di2{
				width: 700px;
				height: 700psx;
				background-color: #7FFFD4;
				padding: 35px 50px 50px 50px ;
				font:larger ;
				color: #A9A9A9;
			}
			#di3{
				width: 600px;
				height: 600px;
				background-color: darkgray;
				background-image: url(img/a.jpg);
				background-size: 700px 700px;
				padding: 35px 50px 50px 50px ;
				font:larger ;
				color: #90EE90;
			}
			#di4{
				width: 500px;
				height: 500px;
				background-color: #DEB887;
				padding: 35px 50px 35px 50px ;
				background-image: url(img/b.jpg);
				background-size: 200px 200px;
				
			}

		</style>
	</head>
	4.制作4个嵌套DIV ，要求：
	      1.每个父DIV尺寸必须大于子DIV
	      2.实现每个DIV在父DIV正中间
	      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
	      4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
	      5.查找每个DIV的子元素和子节点
	<body>
		<div id="di1">
			套娃
			<div id="di2">
				套娃1
				<div id="di3">
					套娃2
					<div id="di4">
						
					</div>
					
				</div>
				
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		//获取父元素
		console.log(d4.parentElement);
		console.log(d4.parentElement.parentElement);
		console.log(d4.parentElement.parentElement.parentElement);
		console.log(d4.parentElement.parentElement.parentElement.parentElement);
		console.log(d4.parentElement.parentElement.parentElement.parentElement.parentElement);
		
		//获取父节点
		console.log(d4.parentNode);
		console.log(d4.parentNode.parentNode);
		console.log(d4.parentNode.parentNode.parentNode);
		console.log(d4.parentNode.parentNode.parentNode.parentNode);
		console.log(d4.parentNode.parentNode.parentNode.parentNode.parentNode);
		//获取子元素 只能看子，子不能看子
		console.log(d1.children);
		console.log(d2.children);
		console.log(d3.children);
		console.log(d4.children);

		//获取子节点
		console.log(d1.childNodes);
		console.log(d2.childNodes);
		console.log(d3.childNodes);
		console.log(d4.childNodes);
	</script>
</html>
